import React, { ReactElement, useState, useEffect } from 'react'
// import style from './index.less'
import { Table, Button, Card, Image, Modal, Input, Form } from 'antd';
import { useDispatch, useSelector } from 'umi'

interface Props {

}

export default function Product({ }: Props): ReactElement {
	const dispatch = useDispatch()
	const [isModalVisible, setVisible] = useState(false)
	const [isShow, setIsShow] = useState(false)
	const [columns, setColumns] = useState([
		{
			title: '菜品编号',
			dataIndex: '_id',
			key: '_id'
		},
		{
			title: '菜品名字',
			dataIndex: 'name',
			key: 'name'
		},
		{
			title: '菜品图像',
			render: (text: any) => (
				<>
					<Image width={100} style={{ width: '100px', height: '100px', textAlign: 'center', borderRadius: "50px" }} src={text.coverpic ? text.coverpic : 'error'} />
				</>
			),
		},
		{
			title: '浏览记录',
			dataIndex: 'pageview',
			key: 'pageview',
		},
		{
			title: '收藏记录',
			dataIndex: 'collections',
			key: 'collections',
		},
		{
			title: '菜品食材',
			render: (text: any) => (
				<>
					<Button type='primary' onClick={() => checkIngredient(text.ingredient)} style={{ marginRight: '10px' }}>查看</Button>
				</>
			),
		},
		{
			title: '制作步骤',
			render: (text: any) => (
				<>
					<Button type='primary' onClick={() => checkSteps(text.method)} style={{ marginRight: '10px' }}>查看</Button>
				</>
			),
		},
		{
			title: '视频时长',
			dataIndex: 'needtime',
			key: 'needtime',
		},
		{
			title: '操作',
			render: (text: any) => (
				<>
					<Button type='primary' onClick={() => updateMenu(text)} danger style={{ marginRight: '10px' }}>修改</Button>
				</>
			),
		}
	])	//列表
	const [ingredient, setIngredient] = useState([
		{
			title: '食材',
			dataIndex: 'name',
			key: 'name'
		},
		{
			title: '用量',
			dataIndex: 'number',
			key: 'number'
		},
	]) //食材表格
	const [ingredientData, setIngredientData] = useState([]) //食材
	const [stepsData, setStepsData] = useState([]) //食材

	const { productData } = useSelector((state: any) => {
		return state.productModel
	})
	// 页面加载完成获取菜品
	useEffect(() => {
		dispatch({
			type: 'productModel/findAllMenu'
		})
	}, [])
	// 查看食材
	const checkIngredient = (val: any) => {
		setVisible(!isModalVisible)
		setIngredientData(val)

	}
	// 查看步骤
	const checkSteps = (val: any) => {
		setIsShow(!isShow)
		setStepsData(val)
	}
	// 删除
	const updateMenu = (data: any) => {
		console.log(data.coverpic);

	}
	const handleOk = () => {
		setVisible(!isModalVisible)
	}
	const handleCancel = () => {
		setVisible(!isModalVisible)
	}
	const isCancel = () => {
		setIsShow(!isShow)
	}
	const isOk = () => {
		setIsShow(!isShow)
	}
	return (
		<div style={{ display: "flex" }}>
			<Card title='菜谱管理' style={{ width: '100%' }}>
				<Table
					bordered
					columns={columns}
					pagination={{ defaultCurrent: 1, defaultPageSize: 12 }}
					dataSource={productData}
					rowKey={(record) => record._id} />
			</Card>
			<Modal
				title="菜品食材"
				destroyOnClose={true}
				visible={isModalVisible}
				onCancel={handleCancel}
				onOk={handleOk}
				footer={null}
			>
				<Table
					bordered
					columns={ingredient}
					dataSource={ingredientData}
					rowKey={(record: any) => record.name}
				/>

			</Modal>
			<Modal
				title="制作步骤"
				destroyOnClose={true}
				visible={isShow}
				onCancel={isCancel}
				onOk={isOk}
				footer={null}
			>
				{stepsData.map((item:any) => {
					return (
						<div key={item.describe}>
							<div>{item.describe}</div>
							<Image src={item.img }></Image>
						</div>
					)
				})}


			</Modal>
		</div>
	)
}
